<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>数据分析</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="mb-3">
            <h1>数据分析</h1>
        </div>
        
        <!-- 统计卡片 -->
        <div class="mb-4">
            <div class="row">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">客户总数</h5>
                            <h2 class="card-text" id="totalCustomers">-</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">销售机会总数</h5>
                            <h2 class="card-text" id="totalOpportunities">-</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">合同总数</h5>
                            <h2 class="card-text" id="totalContracts">-</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">合同总金额</h5>
                            <h2 class="card-text" id="totalAmount">-</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 客户分析 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>客户分析</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <h6>客户状态分布</h6>
                            <div id="customerStatusChart" style="height: 300px;"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div>
                            <h6>客户等级分布</h6>
                            <div id="customerLevelChart" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 销售分析 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>销售分析</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <h6>销售漏斗</h6>
                            <div id="salesFunnelChart" style="height: 300px;"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div>
                            <h6>月销售趋势</h6>
                            <div id="salesTrendChart" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <th:block layout:fragment="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 加载分析数据
                fetch('/crm/api/analytics/data')
                    .then(response => response.json())
                    .then(data => {
                        // 填充统计卡片数据
                        if (data.data && data.data.customer) {
                            document.getElementById('totalCustomers').textContent = data.data.customer.totalCount || 0;
                        }
                        
                        if (data.data && data.data.opportunity) {
                            document.getElementById('totalOpportunities').textContent = data.data.opportunity.totalCount || 0;
                        }
                        
                        if (data.data && data.data.contract) {
                            document.getElementById('totalContracts').textContent = data.data.contract.totalContracts || 0;
                            document.getElementById('totalAmount').textContent = '¥' + (data.data.contract.totalAmount || 0);
                        }
                        
                        // 在这里可以添加图表绘制代码
                    })
                    .catch(error => {
                        console.error('加载分析数据失败:', error);
                    });
            });
        </script>
    </th:block>
</body>
</html> 